<!--
 * @Description: 供应链购物车无数据页面
 * @Author: Kerwin
 * @Date: 2025-09-13 13:44:05
 * @LastEditTime: 2025-10-16 11:16:46
 * @LastEditors:  Please set LastEditors
-->
<template>
  <scroll-view class="carPage" scroll-y="true" @scrolltolower="onScrollToLower">
    <!-- <view class="carPage"> -->
    <!-- navbar -->
    <!-- <view class="diagram">
      <view class="navbar">
        <u-navbar back-text="返回" title="">
          <template v-slot:right>
            <view class="slot-right">编辑</view>
          </template>
        </u-navbar>
      </view>
    </view> -->
    <!-- 内容 -->
    <view class="contentBox">
      <!-- 无数据 -->
      <view class="noData">
        <u-image
          width="50%"
          height="300rpx"
          mode="heightFix"
          :src="car"
        ></u-image>
        <view class="fw700" style="margin: 20rpx 0">暂无商品</view>
        <view style="color: #999999">购物车中没有商品，快去添加吧！</view>
      </view>
    </view>

    <!-- 推荐 -->
    <view class="recommendBox">
      <view class="title">
        <view class="icon-left">
          <u-image
            class="icon"
            width="20rpx"
            height="20rpx"
            mode="heightFix"
            :src="left"
          />
        </view>

        <view class="title-text fw700">好物推荐</view>

        <view class="icon-right">
          <u-image
            class="icon"
            width="20rpx"
            height="20rpx"
            mode="heightFix"
            :src="right"
          />
        </view>
      </view>
      <view class="recommend">
        <ProductList
          ref="cartProductListRef"
          :shop-id="shopGYL_Id"
          :auto-load="true"
          :two-column="true"
          :show-tags="true"
          :show-original-price="true"
          @product-click="gotoGoodsDetail"
        />
      </view>
    </view>
    <!-- </view> -->
  </scroll-view>
</template>

<script setup lang="ts">
import { watch, reactive, ref } from 'vue'
import {
  onReady,
  onShow,
  onLoad,
  onReachBottom,
  onPageScroll,
  onShareAppMessage,
  onPullDownRefresh
} from '@dcloudio/uni-app'
//api
import { productApi, orderApi, baseApi } from '@/api'
//组件
import ProductList from '../../components/goodsList.vue'

// 图片
import car from '../../static/car.png'
import left from '../../static/lineleft.png'
import right from '../../static/lineright.png'
import hot from '../../static/hot.png'

//初始化数据
const goodsList = ref<any>([])
// 分页相关数据
const pagination = reactive({
  pageIndex: 1,
  pageSize: 10,
  total: 0,
  loading: false,
  noMoreData: false
})
const shopGYL_Id = ref(0) //供应链店铺id

// 供应链商店id
const getGYL_SHOP_Id = (id: any) => {
  switch (Number(id)) {
    case 4:
      shopGYL_Id.value = baseApi.advertising_enum.XFL_GYL_SHOP
      break

    default:
      uni.showToast({ title: '请先清空软件，再进入', icon: 'error' })
      break
  }
}
// #region ************ 商品列表 ********************** */
// 滚动到底部时加载更多
const cartProductListRef = ref()
const onScrollToLower = () => {
  cartProductListRef.value?.loadMore()
}

// 点击取商品详情
const gotoGoodsDetail = (item: any) => {
  uni.navigateTo({
    url: `/packageG/pages/goods/goodsDetail?id=${item.productId}`
  })
}
// #endregion

onLoad(() => {
  const mode = uni.getStorageSync('shopMode')
  getGYL_SHOP_Id(mode)
})
</script>

<style lang="scss" scoped>
.carPage {
  height: 100%;
  .slot-right {
    margin-right: 40rpx;
    font-size: 30rpx;
    color: #606266;
  }

  .contentBox {
    .noData {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 80rpx 0;
      text-align: center;
    }
  }

  .recommendBox {
    .title {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      margin-bottom: 20rpx;
      .icon-left,
      .icon-right {
        width: 200rpx;
        height: 30rpx;
      }
      .icon-left {
        // margin-left: 20rpx;
        .icon {
          margin-left: 30rpx;
        }
      }
    }
    // .recommend {
    //   // 让商品列表组件直接在页面滚动中加载更多
    //   padding: 0 20rpx;
    // }
  }
}

.fw700 {
  font-weight: 700;
}

.card {
  padding: 20rpx;
  margin: 20rpx;

  border-radius: 20rpx;
  background-color: #fff;
}
</style>
